import React from 'react';
import {
    Box,
    Typography,
    Button,
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableHead,
    TableRow,
    Paper,
    IconButton,
    Pagination,
    Alert,
    Stack
} from '@mui/material';
import { Download as DownloadIcon } from '@mui/icons-material';
import InfoSection from './InfoSection';
import { WorkExperience } from '../types';
import dayjs from 'dayjs';
import PermissionGuard from '../../../components/PermissionGuard';

interface WorkExperienceSectionProps {
    workExperience: WorkExperience[];
    onEdit: (workExp: WorkExperience) => void;
    onAdd: () => void;
    onView: (id: number) => void;
    onDelete: (id: number) => void;
    onDownload?: () => void;
    page: number;
    rowsPerPage: number;
    onPageChange: (event: unknown, newPage: number) => void;
    loading?: boolean;
    error?: string | null;
    total?: number;
}

const WorkExperienceSection: React.FC<WorkExperienceSectionProps> = ({
    workExperience,
    onEdit,
    onAdd,
    onDelete,
    onDownload,
    page,
    rowsPerPage,
    onPageChange,
    loading,
    error,
    total
}) => {
    return (
        <InfoSection
            title={
                <Box sx={{ display: 'flex', alignItems: 'center' }}>
                    <Typography className="section-title">Offer信息</Typography>
                    {onDownload && (
                        <IconButton size="small" onClick={onDownload} sx={{ ml: 1 }}>
                            <DownloadIcon fontSize="small" />
                        </IconButton>
                    )}
                </Box>
            }
            onAdd={onAdd}
            loading={loading}>
            {error && (
                <Box sx={{ mb: 2 }}>
                    <Alert severity="error">{error}</Alert>
                </Box>
            )}

            {workExperience.length === 0 && !loading ? (
                <Box sx={{ textAlign: 'center', py: 3 }}>
                    <Typography variant="body1" color="text.secondary">
                        暂无工作信息
                    </Typography>
                </Box>
            ) : (
                <>
                    <TableContainer component={Paper} variant="outlined">
                        <Table aria-label="工作信息表">
                            <TableHead>
                                <TableRow>
                                    <TableCell align="center">类型</TableCell>
                                    <TableCell align="center">企业/学校</TableCell>
                                    <TableCell align="center">职位/项目</TableCell>
                                    {/* <TableCell align="center">所属行业</TableCell> */}
                                    <TableCell align="center">地点</TableCell>
                                    <TableCell align="center">月薪</TableCell>
                                    <TableCell align="center">年薪</TableCell>
                                    <TableCell align="center">接受情况</TableCell>
                                    <TableCell align="center">备注</TableCell>
                                    <PermissionGuard requireEditFeatures>
                                        <TableCell align="center">选项</TableCell>
                                    </PermissionGuard>
                                </TableRow>
                            </TableHead>
                            <TableBody>
                                {workExperience.map((row) => (
                                    <TableRow key={row.id}>
                                        <TableCell align="center">{row.offerType || 'N/A'}</TableCell>
                                        <TableCell align="center">{row.companyCollegeName || 'N/A'}</TableCell>
                                        <TableCell align="center">{row.positionProjectName || 'N/A'}</TableCell>
                                        {/* <TableCell align="center">{row.industryName || 'N/A'}</TableCell> */}
                                        <TableCell align="center">{row.location || 'N/A'}</TableCell>
                                        <TableCell align="center">{row.salaryMonth || 'N/A'}</TableCell>
                                        <TableCell align="center">{row.salaryYear || 'N/A'}</TableCell>
                                        <TableCell align="center">{row.acceptStatus || 'N/A'}</TableCell>
                                        <TableCell align="center">{row.remark || 'N/A'}</TableCell>
                                        <PermissionGuard requireEditFeatures>
                                            <TableCell align="center" className="table-actions">
                                                <Stack direction="row" spacing={1} justifyContent="center">
                                                    <Button
                                                        size="small"
                                                        variant="outlined"
                                                        color="primary"
                                                        onClick={() => onEdit(row)}
                                                        sx={{ minWidth: '60px' }}>
                                                        编辑
                                                    </Button>
                                                    <Button
                                                        size="small"
                                                        variant="outlined"
                                                        color="error"
                                                        onClick={() => onDelete(row.id)}
                                                        sx={{ minWidth: '60px' }}>
                                                        删除
                                                    </Button>
                                                </Stack>
                                            </TableCell>
                                        </PermissionGuard>
                                    </TableRow>
                                ))}
                            </TableBody>
                        </Table>
                    </TableContainer>

                    {/* 分页组件 */}
                    {total && total > rowsPerPage && (
                        <Box sx={{ display: 'flex', justifyContent: 'flex-end', mt: 2 }}>
                            <Pagination
                                count={Math.ceil(total / rowsPerPage)}
                                page={page}
                                onChange={onPageChange}
                                color="primary"
                            />
                        </Box>
                    )}
                </>
            )}
        </InfoSection>
    );
};

export default WorkExperienceSection;
